import React from 'react'
import "./index.less"
import { Layout } from 'antd';
const { Header, Footer, Content } = Layout;
import {Menu,Breadcrumb} from 'antd'

export default class Layout_demo2 extends React.Component{
    render(){
        return (
            <div className="Layout_demo2">
                <h1>layout 布局2</h1>
                <Layout id="components-layout-demo-top" className="layout">
                    <Header>
                        <div className="logo"></div>
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu>
                    </Header>
                    <Content style={{padding:'0 50px'}}>
                        <Breadcrumb style={{margin:'16px 0'}}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb>
                        <div className="site-layout-content">Content</div>
                    </Content>
                    <Footer style={{textAlign:'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </div>
        )
    }
}